<template>
    <div class="default-layout">
        <!-- 页头 -->
        <div>
            <header class="bg-white shadow">
                <div class="container mx-auto px-4 py-4 flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <img src="@/assets/images/logo.png" alt="22win Affiliate Logo" class="h-10">
                        
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="relative">
                            <input type="text" placeholder="Username" class="border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-600">
                        </div>
                        <div class="relative">
                            <input type="password" placeholder="Password" class="border rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-600">
                        </div>
                        <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">LOGIN</button>
                        <button class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">SIGN UP</button>
                        <div class="flex items-center space-x-2">
                            <img src="#" alt="Thai Flag" class="h-5">
                            <span class="text-gray-700">TH</span>
                        </div>
<!--                      <select class="select select-info w-full max-w-xs" @change="(event)=>handleChangeLanguage(event)">-->
<!--                        <option disabled selected>Select language</option>-->
<!--                        <option value="en-US">en</option>-->
<!--                        <option  value="zh-CN">中文</option>-->
<!--                      </select>-->
                    </div>
                </div>
            </header>
  <!-- Navbar -->
    <nav class="navbar-container" style="background-color: #fff0de">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-8">
              <NuxtLink to="/" :class="['hover:text-custom-purple',articleTitle === ''? 'text-custom-purple': '']" >HOME</NuxtLink>
              <NuxtLink to="/article/commission-plans" :class="['hover:text-custom-purple',articleTitle === 'commission-plans'? 'text-custom-purple': '']">Commission Plans</NuxtLink>
              <NuxtLink to="/article/terms-and-conditions" :class="['hover:text-custom-purple',articleTitle === 'terms-and-conditions'? 'text-custom-purple': '']">Terms & Condition</NuxtLink>
              <NuxtLink to="/article/faq" :class="['hover:text-custom-purple',articleTitle === 'faq'? 'text-custom-purple': '']">FAQ</NuxtLink>
              <NuxtLink to="/article/contact-us" :class="['hover:text-custom-purple',articleTitle === 'contact-us'? 'text-custom-purple': '']">Contact Us</NuxtLink>
            </div>
        </div>
    </nav>
        </div>
        <!-- 页面主题 pages中的页面将放到这里面 -->
        <div class="w-full">
            <slot></slot>
        </div>
        <!-- 页脚 -->
        <div class="footer">
            <footer class="footer bg-base-200 text-base-content p-10">
                <nav>
                  <h6 class="footer-title">Services</h6>
                  <a class="link link-hover">Branding</a>
                  <a class="link link-hover">Design</a>
                  <a class="link link-hover">Marketing</a>
                  <a class="link link-hover">Advertisement</a>
                </nav>
                <nav>
                  <h6 class="footer-title">Company</h6>
                  <a class="link link-hover">About us</a>
                  <a class="link link-hover">Contact</a>
                  <a class="link link-hover">Jobs</a>
                  <a class="link link-hover">Press kit</a>
                </nav>
                <nav>
                  <h6 class="footer-title">Legal</h6>
                  <a class="link link-hover">Terms of use</a>
                  <a class="link link-hover">Privacy policy</a>
                  <a class="link link-hover">Cookie policy</a>
                </nav>
              </footer>
              <footer class="footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4">
                <aside class="grid-flow-col items-center">
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    class="fill-current">
                    <path
                      d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
                  </svg>
                  <p>
                    ACME Industries Ltd.
                    <br />
                    Providing reliable tech since 1992
                  </p>
                </aside>
                <nav class="md:place-self-center md:justify-self-end">
                  <div class="grid grid-flow-col gap-4">
                    <a>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        class="fill-current">
                        <path
                          d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
                      </svg>
                    </a>
                    <a>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        class="fill-current">
                        <path
                          d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
                      </svg>
                    </a>
                    <a>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        class="fill-current">
                        <path
                          d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
                      </svg>
                    </a>
                  </div>
                </nav>
              </footer>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
//选择语言
const { locale, setLocale } = useI18n()
const handleChangeLanguage = (event) =>{
   setLocale(event.target.value)
}
const route = useRoute()
const articleTitle= ref(route.params.articleTitle)
watch(
    () => route.params.articleTitle,
    (newTitle) => {
      articleTitle.value = newTitle ?? ''
      // 在这里执行根据新的参数重新加载数据或其他逻辑

    }
)

</script>
<style scoped>

</style>